<template>
    <div class="song-detail-box" v-show="picUrl !== ''">
        <div class="base">
            <div class="left-box">
                <div class="song-box">
                    <div class="song-img">
                        <img :src="picUrl"
                             alt="" width="130" height="130">
                    </div>
                    <div class="song-info">
                        <div class="info-t">
                            <span class="song-style">单曲</span>
                            <span class="song-name" :title="name">{{ calString(name, 60) }}</span>
                            <div class="mv-icon">
                                <n-icon size="25">
                                    <svg t="1628238806411" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="2094" width="200" height="200">
                                        <path
                                            d="M807.538 408.872l-99.22 231.336c-5.233 12.162-16.68 19.405-28.892 19.837a86.04 86.04 0 0 1-2.907 0c-12.311-0.416-23.858-7.66-29.108-19.837L561.499 441.17v185.847c0 18.359-14.87 33.228-33.228 33.228s-33.23-14.87-33.23-33.228V527.93l-66.755 115.618c-6.396 11.081-18.208 16.93-30.154 16.448-11.43 0.482-22.745-5.367-28.86-16.448l-73.601-133.28v116.749c0 18.359-14.87 33.228-33.229 33.228s-33.229-14.87-33.229-33.228V394.418c0-18.36 14.87-33.229 33.23-33.229 14.104 0 26.067 8.822 30.902 21.2 4.719 2.824 104.786 180.48 104.786 180.48l96.91-167.853s14.87-33.827 33.229-33.827c10.051 0 18.94 4.553 25.037 11.597 3.09-3.538 6.895-6.53 11.414-8.573 16.83-7.642 36.435-0.016 43.778 17.013l69.447 160.908 69.015-160.908c7.31-17.03 26.799-24.656 43.53-17.013 16.714 7.626 24.357 27.63 17.047 44.66z"
                                            fill="#d61c1c" p-id="2095"></path>
                                        <path
                                            d="M927.011 294.733c0-82.573-66.939-149.528-149.528-149.528H245.83c-82.59 0-149.528 66.955-149.528 149.528v431.969c0 82.589 66.939 149.527 149.528 149.527h531.653c82.59 0 149.528-66.938 149.528-149.527v-431.97zM794.097 942.686H229.214c-110.102 0-199.37-89.268-199.37-199.37V278.117c0-110.102 89.268-199.37 199.37-199.37h564.883c110.102 0 199.37 89.268 199.37 199.37v465.197c0 110.103-89.268 199.371-199.37 199.371z"
                                            fill="#d61c1c" p-id="2096"></path>
                                    </svg>
                                </n-icon>
                            </div>
                        </div>
                        <div class="info-m">
                            <div>
                                <span>歌手：</span>
                                <span class="artist-name" @click="getRouterToArtistInfo(arId)">{{ arName }}</span>
                            </div>
                            <div>
                                <span>所属专辑：</span>
                                <span class="album-name" @click="getRouterToAlbumList(alId)">{{ alName }}</span>
                            </div>
                            <play-icon :id="ids" :comment-count="commentCount"></play-icon>
                        </div>
                        <div class="info-b">
                            <p v-for="(item, index) in lyric.slice(0, showLyricRows)" :key="index">{{ item.lyric }}</p>
                            <p v-for="(item, index) in lyric.slice(showLyricRows, lyric.length)" :key="index"
                               v-show="showMoreLyric">{{ item.lyric }}</p>
                            <p class="text-blue-600 cursor-pointer" @click="isShowMoreLyric(true)"
                               v-show="!showMoreLyric">展开</p>
                            <p class="text-blue-600 cursor-pointer" @click="isShowMoreLyric(false)"
                               v-show="showMoreLyric">收起</p>
                        </div>
                    </div>
                </div>
                <div class="m-16">
                    <comment-on :comment-count="commentCount" :comment-type=0 :id=route.query.ids></comment-on>
                </div>
            </div>
            <div class="right-box">
                <div class="m-4">
                    <p class="text-sm font-bold border-b border-gray-600 border-opacity-50 py-2">相似歌曲</p>
                    <div v-for="(item, index) in simiSong" :key="index" class="my-4 flex">
                        <div>
                            <p class="font-light hover:underline cursor-pointer" @click="songDetailPage(item.id)">
                                {{ item.name }}</p>
                            <p class="hover:underline cursor-pointer text-gray-500">{{ item.artists[0].name }}</p>
                        </div>
                        <div class="flex my-auto ml-auto">
                            <div class="mx-1 cursor-pointer" @click="musicPlay(item.id)">
                                <n-icon size="20">
                                    <svg t="1628302138004" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="2008" width="200" height="200">
                                        <path d="M832.0064 512 192 896 192 128 832.0064 512 832.0064 512zM832.0064 512"
                                              p-id="2009" fill="#a3a3a3"></path>
                                    </svg>
                                </n-icon>
                            </div>
                            <div class="mx-1  cursor-pointer">
                                <n-icon size="20">
                                    <svg t="1628302230644" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="2899" width="200" height="200">
                                        <path
                                            d="M724.398 473.741h-174.14v-174.14c0-21.042-17.217-38.259-38.259-38.259s-38.259 17.216-38.259 38.259v174.14H299.6c-21.042 0-38.259 17.216-38.259 38.259 0 21.042 17.217 38.259 38.259 38.259h174.14v174.14c0 21.042 17.217 38.259 38.259 38.259s38.259-17.216 38.259-38.259v-174.14h174.14c21.042 0 38.259-17.216 38.259-38.259 0-21.042-17.217-38.259-38.259-38.259z"
                                            fill="#a3a3a3" p-id="2900"></path>
                                    </svg>
                                </n-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from "vue";
import {NIcon, useNotification} from 'naive-ui';
import {getLyric, getSimiSong, getSongDetail, getSongUrl} from "@/network/song/song";
import {useRoute, useRouter} from "vue-router";
import PlayIcon from "@/components/PlayIcon";
import CommentOn from "@/components/comment/CommentOn";
import {useStore} from "vuex";
import {calString} from "@/util/cal";
import {getCommentMusic} from "@/network/data/comment";

export default {
    name: "SongDetailInfo",
    setup() {
        const TAG = "SongDetailInfo.vue";
        const store = useStore();
        const route = useRoute();
        const router = useRouter();
        const songInfo = reactive({
            ids: route.query.ids,
            lyric: [],
            name: '',
            // 专辑名字和id
            alName: '',
            alId: -1,
            // 歌手名字和id
            arName: '',
            arId: -1,
            picUrl: '',
            commentCount: 0
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const lyricSetting = reactive({
            showMoreLyric: false,
            showLyricRows: 15,
            length: 0
        })
        // 相似歌曲
        const simiSong = ref([]);
        const formatLyricTime = (time) => { // 格式化歌词的时间 转换成 sss:ms
            const regMin = /.*:/;
            const regSec = /:.*\./;
            const regMs = /\./;
            
            const min = parseInt(time.match(regMin)[0].slice(0, 2));
            let sec = parseInt(time.match(regSec)[0].slice(1, 3));
            const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3);
            if (min !== 0) {
                sec += min * 60;
            }
            return Number(sec + '.' + ms)
        }
        
        const init = () => {
            beLoading();
            getSongDetail(songInfo.ids).then(res => {
                songInfo.name = res.data.songs[0].name;
                songInfo.alId = res.data.songs[0].al.id;
                songInfo.alName = res.data.songs[0].al.name;
                songInfo.picUrl = res.data.songs[0].al.picUrl;
                if (res.data.songs.length == 1) {
                    songInfo.arId = res.data.songs[0].ar[0].id;
                    songInfo.arName = res.data.songs[0].ar[0].name;
                } else {
                    // 暂时只获取第一个歌手
                    songInfo.arId = res.data.songs[0].ar[0].id;
                    songInfo.arName = res.data.songs[0].ar[0].name;
                }
            }).catch(err => {
                console.log(err);
            })
            getLyric(songInfo.ids).then(res => {
                if (typeof (res.data.lrc) === 'undefined') {
                    return null;
                }
                const regNewLine = /\n/;
                // 每行歌词的数组
                const lineArr = res.data.lrc.lyric.split(regNewLine);
                // 正则来匹配中括号里面的时间
                const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
                lineArr.forEach(item => {
                    if (item === '') return;
                    const obj = {};
                    const time = item.match(regTime);
                    
                    obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim();
                    obj.time = time ? formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0;
                    obj.uid = Math.random().toString().slice(-6);
                    if (obj.lyric === '') {
                        // console.log('这一行没有歌词') doNothing
                    } else {
                        songInfo.lyric.push(obj)
                    }
                })
            })
            
            getSimiSong(songInfo.ids).then(res => {
                simiSong.value = res.data.songs;
            })
            getCommentMusic(songInfo.ids).then(res => {
                songInfo.commentCount = res.data.total;
            })
            lyricSetting.length = songInfo.lyric.length;
        }
        
        onMounted(() => {
            init();
        })
        // 是否展示全部歌词
        const isShowMoreLyric = (flag) => {
            lyricSetting.showMoreLyric = flag;
        }
        
        // 设置vuex中的audio变量，给音乐播放器传输音乐数据
        let audio = {};
        const musicPlay = (id) => {
            beLoading();
            getSongDetail(id).then(res => {
                audio.name = res.data.songs[0].name;
                audio.cover = res.data.songs[0].al.picUrl;
                audio.theme = '#100f0f';
                let arts = '';
                if (res.data.songs[0].ar.length > 1) {
                    res.data.songs[0].ar.forEach((e) => {
                        arts += e.name;
                        arts += '/';
                    })
                } else {
                    arts += res.data.songs[0].ar[0].name;
                }
                audio.artist = arts;
            })
            getSongUrl(id).then(res => {
                audio.url = res.data.data[0].url;
            })
            getLyric(id).then(res => {
                audio.lrc = res.data.lrc.lyric;
            })
            // 清除播放器状态
            store.state.audio = [];
            const audioArr = new Array(audio);
            store.commit('setAudio', audioArr);
        }
        // 通知组件
        const notification = useNotification();
        // 跳转到歌曲详情页面
        const songDetailPage = (ids) => {
            if (ids === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/song', query: {ids}});
            }
        }
        // 跳转到歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
        // 根据ＩＤ获取专辑详情
        const getRouterToAlbumList = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/album', query: {id}});
            }
        }
        return {
            ...toRefs(songInfo),
            ...toRefs(lyricSetting),
            isShowMoreLyric,
            route,
            simiSong,
            songDetailPage,
            musicPlay,
            calString,
            getRouterToArtistInfo,
            getRouterToAlbumList
        }
    },
    components: {
        NIcon,
        CommentOn,
        PlayIcon
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.song-detail-box {
    width: $client-width;
    background: #f4f4f4;
    
    min-height: $client-height;
    
    .left-box {
        @apply w-4/5 border bg-white;
        .song-box {
            @apply flex m-16;
            .song-img {
                @apply relative shadow-2xl bg-gradient-to-r from-red-600 to-blue-600;
                width: 200px;
                height: 200px;
                border-radius: 100px;
                
                img {
                    @apply shadow-2xl border-black border-2;
                    transform: translateX(35px) translateY(35px);
                    border-radius: 65px;
                }
            }
            
            .song-info {
                @apply mx-8;
                .info-t {
                    @apply flex my-4;
                    .song-style {
                        @apply p-1 text-white font-light text-sm rounded-md;
                        background: #d61c1c;
                    }
                    
                    .song-name {
                        @apply mx-4 text-xl font-bold;
                    }
                    
                    .mv-icon {
                        @apply flex items-center justify-center cursor-pointer;
                    }
                }
                
                .info-m {
                    @apply my-4;
                    span {
                        color: #999999;
                    }
                    
                    .artist-name {
                        @apply hover:underline cursor-pointer;
                        color: #2c74c2;
                    }
                    
                    .album-name {
                        @apply hover:underline cursor-pointer;
                        color: #2c74c2;
                    }
                    
                    .play-icons {
                        @apply flex mt-4;
                        .icon-play {
                            @apply p-2 cursor-pointer rounded-md hover:opacity-70 border shadow-2xl;
                            background: #3483cf;
                        }
                        
                        .icon-collect {
                            @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
                            background: #fdfdfd;
                        }
                        
                        .icon-share {
                            @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
                            background: #fdfdfd;
                        }
                        
                        .icon-download {
                            @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
                            background: #fdfdfd;
                        }
                        
                        .icon-comments {
                            @apply mx-2 p-2 cursor-pointer rounded-md hover:opacity-70 border border-gray-400;
                            background: #fdfdfd;
                        }
                    }
                }
                
                .info-b {
                    @apply my-4 min-w-max;
                }
            }
        }
    }
    
    .right-box {
        @apply w-1/5 border bg-white;
    }
}
</style>